<template>
	<view class="collect">
		<custom-navi :show-home="false">收款二维码</custom-navi>
		<view class="collect-upCode">
			<view class="upload">
			  <view
			    v-for="(item,index) in imgList"
			    :key="index"
			    class="upload-child"
			    @tap="handleImgDetailSet(index)"
			  >
			    <image :src="item.url" mode="widthFix" />
			  </view>
			  <view v-if="imgList.length<1" class="addPhoto" @tap="handlerImg">
				  <!-- <text class='cuIcon-cameraadd'></text> -->
				<view class="">
					<text class='cuIcon-cameraadd'></text>
					<view class="">请上传店铺收款码</view>
				</view>
			  </view>
			</view>
			<image-cropper :src="cj" @confirm="confirm" @cancel="cancel"></image-cropper>
		</view>
		<view class="saveBtn" :class="{save:imgList!=''}" @click="saveBtn">
			保存
		</view>
	</view>
</template>

<script>
	import {
	  changeInformation,
	  submitStoreExamine,
	  getExamineResult
	} from '../../../../api.js'
	import CONSTS from '@/src/consts';
	import ImageCropper from "../../../../components/invinbg-image-cropper/invinbg-image-cropper.vue";
	export default {
		components: { ImageCropper },
		 data () {
			return {
				cj: '',
				content:'',
				imgList: [],
			}
		},
		onLoad() {
			const _self = this
			uni.getStorage({
			  key: 'receiptCode',
			  success: function (res) {
				  if(res.data){
					_self.imgList = res.data
				  }
			    
			  }
			});
		},
		methods:{
			//上传图片
			handlerImg () {
			   const _self = this
			   uni.chooseImage({
			     count: 3, //默认9
			     sizeType: ['original', 'compressed'],
			     sourceType: ['album'],
			     success: function (res) {
			       const tempFilePaths = res.tempFilePaths;
			       uni.uploadFile({
			         url: CONSTS.BASE_URL + '/basic/upload/single/store',
			         // url: 'https://zhangmugui1.utools.club/api/v2/basic/upload/single/store',
			         filePath: tempFilePaths[0],
			         name: 'file',
			         formData: {
			           'user': 'test'
			         },
			         success: (uploadFileRes) => {
			           const res = JSON.parse(uploadFileRes.data)
			 
			           _self.cj = CONSTS.BASE_URL + '/basic' + res.data
			         }
			       });
			     }
			   })
			 },
			 confirm (e) {
			   this.cj = ''
			   const _self = this
			   uni.uploadFile({
			     url: CONSTS.BASE_URL + '/basic/upload/single/store',
			     filePath: e.detail.tempFilePath,
			     name: 'file',
			     formData: {
			       'user': 'test'
			     },
			     success: (uploadFileRes) => {
			       const res = JSON.parse(uploadFileRes.data)
			 
			       const imgMode = {
			         url: CONSTS.BASE_URL + '/basic' + res.data,
			         path: res.data,
			         title: ""
			       }
			       _self.imgList.push(imgMode)
			 	  // console.log(_self.imgList)
			     }
			   });
			 },
			 cancel () {
			   console.log('canceled')
			 },
			 handleImgDetailSet (index) {
			 	const _self = this
			 	uni.chooseImage({
			 	  count: 3, //默认9
			 	  sizeType: ['original', 'compressed'],
			 	  sourceType: ['album'],
			 	  success: function (res) {
			 	    const tempFilePaths = res.tempFilePaths;
			 	    uni.uploadFile({
			 	      url: CONSTS.BASE_URL + '/basic/upload/single/store',
			 	      // url: 'https://zhangmugui1.utools.club/api/v2/basic/upload/single/store',
			 	      filePath: tempFilePaths[0],
			 	      name: 'file',
			 	      formData: {
			 	        'user': 'test'
			 	      },
			 	      success: (uploadFileRes) => {
			 	        const res = JSON.parse(uploadFileRes.data)
			 				
			 	        _self.cj = CONSTS.BASE_URL + '/basic' + res.data
			 			_self.imgList.splice(index,1)
			 			// console.log(_self.imgList)
			 	      }
			 	    });
			 	  }
			 	})
			 	
			 },
			 saveBtn(){
				 if(this.imgList!=''){
					 console.log(111)
					 this.$utils.common.toast.fail("保存成功");
					 uni.setStorageSync('receiptCode', this.imgList)
				 }else{
					this.$utils.common.toast.fail("请上传收款二维码");
				 }
			 }
		}
	}
</script>

<style lang="scss" scoped>
	.collect{
		height: 100vh;
		background-color: #FFFFFF;
	}
	.upload {
	  padding: 32rpx 30rpx 0 30rpx;
	  display: flex;
	  flex-wrap: wrap;
	  background-color: #ffffff;
	  margin-bottom: 20rpx;
	  &-child {
	    position: relative;
	    margin: 2rpx;
		width: 690rpx;
		height: 690rpx;
		margin-right: 10rpx;
		overflow: hidden;
	    image {
	      width: 690rpx;
	      height: 690rpx;
	    }
	    &-title {
	      position: absolute;
	      bottom: 6rpx;
	      width: 100%;
	      padding: 24rpx;
	      padding-bottom: 18rpx;
	      color: #ffffff;
	      text-overflow: ellipsis;
	      overflow: hidden;
	      background: linear-gradient(
	        180deg,
	        rgba(113, 113, 113, 0) 0%,
	        rgba(0, 0, 0, 0.33) 33%,
	        rgba(3, 3, 3, 1) 100%
	      );
	    }
	  }
	  .addPhoto {
	    margin: 2rpx;
	    width: 100%;
	    height: 340rpx;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background: rgba(230, 255, 254, 1);
	    border: 1rpx dashed rgba(12, 212, 211, 1);
	    font-size: 106rpx;
		border-radius: 20rpx;
		overflow: hidden;
		view{
			font-size:28rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(12,212,211,1);
			opacity:1;
			text-align: center;
			view{
				margin-top: 20rpx;
			}
			text{
				font-size:60rpx
			}
		}
	  }
	}
	.saveBtn{
		width:690rpx;
		height:88rpx;
		background:rgba(149,151,166,1);
		opacity:1;
		border-radius:110rpx;
		margin: 0 auto;
		text-align: center;
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:400;
		line-height:88rpx;
		color:rgba(255,255,255,1);
		opacity:1;
		position: absolute;
		bottom: 40rpx;
		left: 4%;
	}
	.save{
		background:rgba(12, 212, 211, 1);
	}
	
</style>
